<template>
  <div>
    <div v-if="isShow">
      <!-- 条件查询跑马灯列表 -->
      <div class="check-form-box">
        <el-form
          :inline="true"
          :model="searchModel.data"
          class="demo-form-inline"
        >
          <el-form-item label="添加日期">
            <el-date-picker
              v-model="searchModel.createDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="客群">
            <el-select v-model="searchModel.userType" placeholder="请选择状态">
              <el-option label="全部" :value="null" />
              <el-option label="车主" value="1" />
              <el-option label="展业员" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchModel.state" placeholder="请选择状态">
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="添加人">
            <el-input
              v-model.trim="searchModel.creator"
              placeholder="请输入添加人"
            />
          </el-form-item>
        </el-form>
        <div class="subBtnBox">
          <el-button type="primary" color="#ea5b24" @click="searchOrder()"
            >查询</el-button
          >
          <el-button
            type="primary"
            color="#ea5b24"
            @click="showDetails()"
            v-if="pinia.isShow[151]"
            >添加</el-button
          >
        </div>
      </div>

      <!-- 跑马灯数据列表 -->
      <div style="margin-top: 20px">
        <el-table :data="tableData.data" style="width: 100%">
          <el-table-column prop="createTime" width="160" label="添加日期" />
          <el-table-column
            prop="bizPlatform"
            label="品牌"
            show-overflow-tooltip="true"
          />
          <el-table-column
            prop="appPlatform"
            label="端口"
            show-overflow-tooltip="true"
          />
          <el-table-column
            prop="userType"
            :formatter="judgeUserType"
            label="客群"
          />
          <el-table-column prop="adId" label="广告ID" />
          <el-table-column prop="clickVolume" label="点击量" />
          <el-table-column prop="effectiveTime" width="160" label="生效时间" />
          <el-table-column prop="expireTime" width="160" label="失效时间" />
          <el-table-column prop="createUserName" label="添加人" />
          <el-table-column prop="checkUserName" label="审核人" />
          <el-table-column label="状态">
            <template #default="scope">
              <div
                @click="showReason(scope.row)"
                :style="{
                  color: scope.row.state == 2 ? '#169BD5' : 'black',
                }"
              >
                {{ judgeState(scope.row) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template v-slot:default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="showDetails(scope.row)"
                v-if="pinia.isShow[152]"
                >查看详情</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="offShelf(scope.row)"
                v-if="scope.row.state === 1 && pinia.isShow[155]"
                >下架</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页插件 -->
        <div style="text-align: center">
          <el-pagination
            :total="totalNum"
            @current-change="handleCurrentChange"
            background
            :page-size="size"
            layout="prev, pager, next, total"
            :current-page="page"
          />
        </div>
      </div>
      <!-- 审核不通过原因 -->
      <el-dialog title="审核不通过原因" v-model="dialogVisible" width="30%">
        <span>{{ reason }}</span>
      </el-dialog>
    </div>
    <div v-else>
      <detaild
        :detaildData="detaildData"
        @packConfigBack="showDetails"
      ></detaild>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import detaild from "./detaild.vue";
import { findADVListApi, offShelfADVApi } from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  pageNum: page,
  pageSize: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.pageNum = page.value;
  findOrder(flipData);
};

// 控制审核失败原因显示
const dialogVisible = ref(false);
// 审核不通过原因
const reason = ref("");

// 控制详情组件显示
const isShow = ref(true);
// 传入详情组件参数
const detaildData = ref({
  id: null,
});

// 搜索模型
const searchModel: any = reactive({
  creator: null,
  state: null,
  userType: null,
  createDate: null,
  startTime: null,
  endTime: null,
  pageNum: page,
  pageSize: size,
});

// 过滤状态显示
function judgeState(item) {
  switch (item.state) {
    case 0:
      return "待审核";
    case 1:
      return "审核通过";
    case 2:
      return "审核不通过";
    case 3:
      return "已下架";
    default:
      return "";
  }
}

// 过滤客群
function judgeUserType(item) {
  switch (item.userType) {
    case 1:
      return "车主";
    case 2:
      return "展业员";
    default:
      return "";
  }
}

// 状态枚举
const stateOptions: any = reactive([
  { value: null, label: "全部" },
  { value: "0", label: "待审核" },
  { value: "1", label: "审核通过" },
  { value: "2", label: "审核不通过" },
  { value: "3", label: "已下架" },
]);

// 展示审核不通过原因
const showReason = (item) => {
  if (item.state === 2) {
    reason.value = item.checkNote;
    dialogVisible.value = true;
  }
};

// 展示详情
const showDetails = (item = null) => {
  if (item) {
    detaildData.value.id = item.id;
  } else {
    detaildData.value.id = null;
    findOrder(searchModel);
  }
  isShow.value = !isShow.value;
};

const searchOrder = () => {
  page.value = 1;
  if (searchModel.createDate) {
    searchModel.startTime = formatDateTime(searchModel.createDate[0]);
    searchModel.endTime = formatDateTime(searchModel.createDate[1]).replace(
      "00:00:00",
      "23:59:59"
    );
  } else {
    searchModel.startTime = null;
    searchModel.endTime = null;
  }
  searchParmSearch();
  findOrder(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};
// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 查询广告列表
const findOrder = (searchModel) => {
  findADVListApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.items;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 下架
const offShelf = (item) => {
  ElMessageBox.confirm("是否确认下架?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    offShelfADVApi({ id: item.id }).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "下架成功.",
          type: "success",
        });
        findOrder(searchModel);
      } else {
        ElMessage.error("下架失败.");
      }
    });
  });
};

onMounted(() => {
  findOrder(searchModel);
});
</script>
<style scoped>
:deep(.demo-form-inline) {
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 25%);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item) {
  width: 90%;
}

.subBtnBox {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}
</style>
